  <template>
  <el-container>
    <el-aside width="40%">
      <el-card style="margin:3%;">
        <el-table
          :data="tableData"
          :row-style="styleRow"
          :header-row-style="headerRow"
          @row-click="changeRole"
          highlight-current-row
        >
          <el-table-column prop="name" label="角色" align="center"></el-table-column>
        </el-table>
      </el-card>
    </el-aside>
    <el-main width="50%">
      <el-card style="margin:2%;font-size:20px;color:#909399;">
        <span style="padding-left:30%;margin-bottom:1%;font-weight: bold;">菜单</span>
        <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          :check-strictly="isCheck"
          highlight-current
          :props="defaultProps"
          icon-class="el-icon-s-promotion"
        ></el-tree>
        <span style="padding-left:30%">
          <el-button type="info" size="small" @click="changeMenu">修改</el-button>
        </span>
      </el-card>
    </el-main>
  </el-container>
</template>
  <script>
import { getRoleList, getRoleMenu, changeRoleMenu } from "@/api/roleApi";
import { getMenuData,getAllMenuData } from "@/api/menuApi";
export default {
  data() {
    return {
      isCheck:false,//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
      menuLIst:[],
      currentRowId: "",
      tableLoding: false,
      headerRow: {
        "font-size": "20px",
        margin: "2%",
        height: "80px"
      },
      styleRow: {
        "font-size": "15px",
        height: "50px"
      },
      tableData: [{ id: "", name: "" }],
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      count: 1
    };
  },
  created: function() {
    this.getRole();
    this.getMenu();
    this.getAllMenu();
  },
  methods: {
    getAllMenu(){
      getAllMenuData()
      .then(res=>{
          this.menuLIst=res.data.data;
      })

    },
    getMenu() {
      getMenuData()
        .then(res => {
          this.data = res.data.data;
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "菜单出错！",
            type: "error"
          });
        });
    },
    getRole() {
      this.tableLoding = true;
      getRoleList()
        .then(response => {
          this.tableData = response.data.data;
          // console.log(response.data);
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "角色查询失败！",
            type: "error"
          });
        });
      this.tableLoding = false;
    },
    handleCheckChange() {
      
      //console.log("111");
    },
    changeRole(row, index) {
      this.currentRowId = row.id;//当前选中的角色id
      this.isCheck=true;
      getRoleMenu(row).then(response => {
        var roleIdList = response.data.data;
        let menus = [];
        roleIdList.forEach(element => {
          menus.push(element.mid);
        });
        this.$refs.tree.setCheckedKeys(menus);
        this.isCheck=false;
      });
      
    },
    changeMenu() {
      //console.log(this.$refs.tree.getCheckedNodes(false, true));
      var roleMenuInfo = {
        menuIds: this.$refs.tree.getCheckedNodes(false, true),
        roleId: this.currentRowId
      };
      //console.log(roleMenuInfo);
      changeRoleMenu(roleMenuInfo)
        .then(response => {
          this.$message.success("修改成功！");
        })
        .catch(error => {
          this.$message.error(error.data.respondMessage);
        });
    }
  }
};
</script>
<style >
.el-table::before {
  width: 0%;
}
.el-tree-node__label {
  font-size: 15px;
}
.el-tree-node__content {
  height: 40px;
}
</style>